<!-- checkin-devs -->
<template>
    <div class="checkin-devs">
        <div class="checkin-devs-left">
        <!--
            :tableParas="tableParas2"
            :tableData="$attrs.tb2"
            :compare="findDif"
         -->
            <c-table 
            headColor="#7574F1" 
            headTitle="出库工具"
            :tableParas="tableParas1"
            :tableData="tableData1"
            :showCompare="true"
            ></c-table>
        </div>
        <div class="checkin-devs-right">

        <!-- #192539 -->
            <c-table 
            headColor="#09BFED" 
            headTitle="实际入库"
            bgColor="#192539"
            :tableParas="tableParas2"
            :tableData="tableData2">
            </c-table>
        </div>
    </div>
</template>

<script>
import {
    getOutDevList
} from '@/apis';
import _ from 'lodash';
export default {
    name: 'checkin-devs',
    data () {
        this.tableParas1 = [{
            label: '工具',
            prop: 'toolName'

        },{
            label: '型号',
            prop: 'toolSpec'
        }, {
            label: '时间',
            prop: 'operateTime'
        }, {
            label: '出借人员',
            prop: 'operateUser'
        }];
        this.tableParas2 = [{
            label: '工具',
            prop: 'toolName'

        },{
            label: '型号',
            prop: 'toolSpec'
        }, {
            label: '时间',
            prop: 'operateTime'
        }, {
            label: '出借人员',
            prop: 'operateUser'
        }];
        return {
            tb1: [],
            //compare: '11111'
        }
    },
    props: {
        buhuan: {
            type: Number,
            default: 1
        }
    },
    components: {
        'c-table': () => import('@/components/c-table')
    },
    computed: {
        // 获取出库入库不同之处
        tbDif () {
            let idList = this.$attrs.tb2.map(v => v.toolCode);
            return this.tb1.filter(item => {
                return idList.indexOf(item.toolCode) > -1
            })
        },
        tableData1 () {
            let idList2 = this.tbDif.map(item => item.toolCode);
            return this.tb1.map(item1 => {
                let _item;
                if (idList2.includes(item1.toolCode)) {
                    _item = {
                        ...item1,
                        compare: 0
                    }
                } else {
                    _item = item1;
                }
                return _item
            }).sort((x, y) => x.toolName ? (x.toolName.localeCompare(y.toolName)) : null)
        },
        tableData2 () {
            let arr = _.uniqBy(this.$attrs.tb2, 'toolCode');
            return arr.sort((x, y) => x.toolName ? (x.toolName.localeCompare(y.toolName)) : null)
        }
    },
    methods: {
        // 获取出库的列表
        async getOutDevList () {
            try {
                let id = sessionStorage.getItem('dataId');
                let res = await getOutDevList(id);
                console.log('获取出库的列表', res);
                let {
                    code,
                    msg,
                    data
                } = res.data;
                if (code == 200) {
                    this.tb1 = data;
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                }
            } catch(e) {
                console.log('获取出库的列表',e)
            }
        },
    },
    created () {
        if (this.buhuan == 1) {
            this.getOutDevList();
        } else if (this.buhuan == 0) {
            let buhuan_out = window.sessionStorage.getItem('buhuan_out');
            this.tb1 = buhuan_out ? JSON.parse(buhuan_out) : [];
        }
    }
}
</script>
<style lang='scss' scoped>
.checkin-devs {
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    &-left {
        width: 50%;
        height: 100%;
        float: left;
    }

    &-right {
        width: 50%;
        height: 100%;
        float: left;
        margin-left: -1px;
    }
}

</style>